var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react", "controls/design-view", "services/local-service", "services/page-datas", "controls/spiner-component", "maishu-services-sdk", "maishu-ui-toolkit", "components/categories/component", "common", "controls/item-dialog", "components/common/base-component", "controls/image-manager", "services/shopping", "services/dataSources"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const design_view_1 = require("controls/design-view");
    const local_service_1 = require("services/local-service");
    const page_datas_1 = require("services/page-datas");
    const spiner_component_1 = require("controls/spiner-component");
    const maishu_services_sdk_1 = require("maishu-services-sdk");
    const ui = require("maishu-ui-toolkit");
    const component_1 = require("components/categories/component");
    const common_1 = require("common");
    const item_dialog_1 = require("controls/item-dialog");
    const base_component_1 = require("components/common/base-component");
    const image_manager_1 = require("controls/image-manager");
    const shopping_1 = require("services/shopping");
    const dataSources_1 = require("services/dataSources");
    class CategoriesPage extends spiner_component_1.SpinerComponent {
        constructor(props) {
            super(props);
            this.localService = this.props.createService(local_service_1.LocalService);
            this.imageService = this.props.createService(maishu_services_sdk_1.ImageService);
            this.shoppingService = this.props.createService(shopping_1.ShoppingService);
        }
        loadData() {
            return __awaiter(this, void 0, void 0, function* () {
                let pageDataRecord = yield page_datas_1.pageDatas.categories();
                return { pageDataRecord };
            });
        }
        categoriesProps() {
            let { pageDataRecord, categories } = this.state;
            let categoriesData = pageDataRecord.pageData.children.filter(o => o.type == component_1.Categories.name)[0];
            return categoriesData.props;
        }
        editItem(category) {
            this.categoryDialog.show(category, "编辑品类", (item) => __awaiter(this, void 0, void 0, function* () {
                yield this.shoppingService.updateCategory(item);
                this.setState({});
            }));
        }
        newItem() {
            this.categoryDialog.show({}, "新增类别", (item) => __awaiter(this, void 0, void 0, function* () {
                let { categories } = this.state;
                yield this.shoppingService.addCategory(item);
                categories.push(item);
                this.setState({ categories });
            }));
        }
        designViewRef(e) {
            if (this.designView != null || e == null)
                return;
            this.designView = e;
            this.designView.designer.attach(designer => {
                if (designer == null)
                    return;
                this.categoriesComponent = designer.findComponetsByTypeName(component_1.Categories.name)[0];
                common_1.asyncComponentState(this.categoriesComponent, this, "categories");
            });
        }
        render() {
            let { pageDataRecord: pageData, categories } = this.state;
            categories = (categories || []).sort((a, b) => {
                return (a.SortNumber || 0) - (b.SortNumber || 0);
            });
            let categoriesProps = this.categoriesProps();
            let { showIcon } = categoriesProps;
            return React.createElement(design_view_1.DesignView, Object.assign({}, this.props, { ref: e => this.designViewRef(e) }, { pageDataRecord: pageData, hideEditorPanel: true }),
                React.createElement("table", { className: "table table-striped table-bordered table-hover", ref: e => this.categoryTable = e || this.categoryTable },
                    React.createElement("thead", null,
                        React.createElement("tr", null,
                            React.createElement("th", null, "\u5E8F\u53F7"),
                            React.createElement("th", null, "\u540D\u79F0"),
                            React.createElement("th", null, "\u5907\u6CE8"),
                            React.createElement("th", null, "\u9690\u85CF"),
                            React.createElement("th", null, "\u56FE\u7247"),
                            React.createElement("th", null, "\u64CD\u4F5C"))),
                    React.createElement("tbody", null,
                        categories.map((o, i) => React.createElement("tr", { key: o.Id || i },
                            React.createElement("td", null, o.SortNumber),
                            React.createElement("td", null, o.Name),
                            React.createElement("td", null, o.Remark),
                            React.createElement("td", null, o.Hidden),
                            React.createElement("td", { style: { textAlign: 'center' } },
                                React.createElement("img", { src: this.imageService.imageSource(o.ImagePath), style: { height: 36 } })),
                            React.createElement("td", { style: { textAlign: 'center' } },
                                React.createElement("button", { className: "btn btn-minier btn-info", style: { marginRight: 4 }, ref: (e) => {
                                        if (!e)
                                            return;
                                        e.onclick = () => this.editItem(o);
                                    } },
                                    React.createElement("i", { className: "icon-pencil" })),
                                React.createElement("button", { className: "btn btn-minier btn-danger", ref: (e) => {
                                        if (!e)
                                            return;
                                        e.onclick = ui.buttonOnClick((event) => __awaiter(this, void 0, void 0, function* () {
                                            yield dataSources_1.dataSources.category.delete(o);
                                            categories = categories.filter(c => c.Id != o.Id);
                                            this.setState({ categories });
                                        }), { confirm: `确定要删除类别'${o.Name}'吗?` });
                                    } },
                                    React.createElement("i", { className: "icon-trash" }))))),
                        categories.length == 0 ?
                            React.createElement("tr", null,
                                React.createElement("td", { colSpan: 6, className: "text-center", style: { padding: `80px 0 80px 0` } }, "\u6682\u65E0\u6570\u636E")) : null)),
                React.createElement("div", { className: "well", style: { display: "inline-block", width: "100%" } },
                    React.createElement("div", { className: "pull-left", style: { paddingTop: 4, paddingRight: 10, paddingLeft: 10 } }, "\u663E\u793A\u56FE\u6807"),
                    React.createElement("label", { className: "pull-left switch" },
                        React.createElement("input", { type: "checkbox", className: "ace ace-switch ace-switch-5", checked: showIcon, onChange: e => {
                                categoriesProps.showIcon = e.target.checked;
                                this.setState({ pageDataRecord: pageData });
                            } }),
                        React.createElement("span", { className: "lbl middle" })),
                    React.createElement("div", { className: "pull-right" },
                        React.createElement("button", { className: "btn btn-primary", onClick: () => this.newItem() },
                            React.createElement("i", { className: "icon-plus", style: { marginRight: 4 } }),
                            "\u6DFB\u52A0\u7C7B\u522B"))),
                React.createElement(CategoryDialog, { showIcon: showIcon, ref: e => this.categoryDialog = e || this.categoryDialog }));
        }
    }
    exports.default = CategoriesPage;
    class CategoryDialog extends item_dialog_1.ItemDialog {
        constructor(props) {
            super(props);
            this.imageService = base_component_1.createService(maishu_services_sdk_1.ImageService);
        }
        render() {
            let { showIcon } = this.props;
            let { item } = this.state || {};
            return React.createElement("div", { className: "form-horizontal" },
                React.createElement("div", { className: "form-group" },
                    React.createElement("label", { className: "control-label col-sm-2" }, "\u5E8F\u53F7"),
                    React.createElement("div", { className: "col-sm-10" },
                        React.createElement("input", { name: "sortNumber", className: "form-control", placeholder: "\u5546\u54C1\u7C7B\u522B\u7684\u5E8F\u53F7(\u53EF\u7A7A)", value: item.SortNumber || "", onChange: e => {
                                item.SortNumber = Number.parseInt(e.target.value);
                                this.setState({ item });
                            } }))),
                React.createElement("div", { className: "form-group" },
                    React.createElement("label", { className: "control-label col-sm-2" }, "\u540D\u79F0*"),
                    React.createElement("div", { className: "col-sm-10" },
                        React.createElement("input", { name: "Name", className: "form-control", placeholder: "\u5546\u54C1\u7C7B\u522B\u7684\u540D\u79F0(\u5FC5\u586B)", value: item.Name || "", onChange: e => {
                                item.Name = e.target.value;
                                this.setState({ item });
                            } }))),
                React.createElement("div", { className: "form-group" },
                    React.createElement("label", { className: "control-label col-sm-2" }, "\u5907\u6CE8"),
                    React.createElement("div", { className: "col-sm-10" },
                        React.createElement("input", { name: "Remark", className: "form-control", placeholder: "\u5546\u54C1\u7C7B\u522B\u7684\u5907\u6CE8\u4FE1\u606F(\u53EF\u7A7A)", value: item.Remark || "", onChange: e => {
                                item.Remark = e.target.value;
                                this.setState({ item });
                            } }))),
                React.createElement("div", { className: "form-group", style: { display: showIcon ? 'block' : 'none' } },
                    React.createElement("label", { className: "control-label col-sm-2" }, "\u56FE\u7247"),
                    React.createElement("div", { className: "col-sm-10" },
                        React.createElement("div", { className: "well", style: { margin: 0, padding: 0 } },
                            React.createElement("img", { style: { width: 100, height: 100 }, src: this.imageService.imageSource(item.ImagePath), title: "\u70B9\u51FB\u4E0A\u4F20\u56FE\u7247", ref: (e) => {
                                    if (!e)
                                        return;
                                    ui.renderImage(e, { imageSize: { width: 100, height: 100 } });
                                    e.onclick = () => {
                                        image_manager_1.default.show((imageIds) => {
                                            item.ImagePath = imageIds[0];
                                            this.setState(this.state);
                                        });
                                    };
                                } })))),
                React.createElement("div", { className: "form-group" },
                    React.createElement("div", { className: "col-sm-offset-2 col-sm-10" },
                        React.createElement("div", { className: "checkbox" },
                            React.createElement("label", null,
                                React.createElement("input", { name: "Hidden", type: "checkbox", checked: item.Hidden, onChange: (e) => {
                                        item.Hidden = e.target.checked;
                                        this.setState({ item });
                                    } }),
                                "\u5728\u524D\u53F0\u9690\u85CF\u8BE5\u7C7B\u522B")))));
        }
    }
});
